<template>
  <div id="app">
    <main>
      <div v-for='(item,index) in foot' :key='index'>
        <div :is='item.name' v-if='index==activeIndex'></div>
      </div>
    </main>
    <footer>
      <TabFoot :foot='foot' :activeIndex="activeIndex">

      </TabFoot>
    </footer>
  </div>
</template>

<script>
import TabFoot from './components/TabFoot.vue';
import Find from './components/body/Find.vue';
import Home from './components/body/Home.vue';
import Message from './components/body/Message.vue';
import My from './components/body/My.vue';
import Release from './components/body/Release.vue';

export default {
  name: 'App',
  components:{
    TabFoot,
    Find,
    Home,
    Message,
    My,
    Release
  },
  data(){
    return{
      activeIndex:0,
      foot:[{
        name:"Home",
        title:'首页'
      },{
        name:"Find",
        title:'找房'
      },{
        name:"Message",
        title:'信息'
      },{
        name:"My",
        title:'我的'
      },{
        name:"Release",
        title:'发布'
      }]
    }
  },
  mounted(){
    this.bus.$on('changeActive',(index)=>{
      this.activeIndex=index
    })
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  }
  html,body,#app{
    width: 100%;
    height: 100%;
  }
 #app{
    display: flex;
    flex-direction: column;
  }
  main{
    flex: 1;
    overflow-y: scroll;
  }
  footer{
    width: 100%;
    height: 60px;
    background: #09f;
  }
  footer ul{
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>
